CSS Custom Highlight Priority: Управление на слоевете за селекция на текст за глобална достъпност

Уебът е глобална платформа и осигуряването на последователно и достъпно потребителско изживяване за всички, независимо от техния език, местоположение или устройство, е от първостепенно значение. Един често пренебрегван аспект на потребителското изживяване е селекцията на текст. Въпреки че изглежда просто, слоят за селекция на текст може да бъде персонализиран с помощта на CSS, за да осигури по-добри визуални индикации, подобрена достъпност и дори подобрена функционалност. Тази публикация в блога изследва CSS Custom Highlight API, фокусирайки се върху това как да контролирате приоритета на слоевете за селекция на текст и да управлявате подчертаванията за глобална достъпност.

Разбиране на слоя за селекция на текст

Когато потребител избира текст на уеб страница, браузърът прилага стандартно подчертаване, обикновено син фон с бял текст. Това подчертаване се контролира от псевдоелемента ::selection. Въпреки това, с навлизането на CSS Houdini и Custom Highlight API, разработчиците вече имат много по-голям контрол върху начина, по който текстът се подчертава, включително възможността да се дефинират множество слоеве за подчертаване и да се контролира техният приоритет.

Слоят за селекция на текст по същество е визуален слой, рендиран върху нормалния поток на съдържанието. Той ви позволява да персонализирате външния вид на избрания текст и други подчертани области. Разбирането как този слой взаимодейства с други CSS свойства е от решаващо значение за създаването на визуално привлекателни и достъпни уеб изживявания.

Представяне на CSS Custom Highlight API

CSS Custom Highlight API е част от пакета от API на CSS Houdini, които позволяват на разработчиците да разширяват CSS функционалността. Той предоставя начин за дефиниране на персонализирани подчертавания, използвайки псевдоелемента ::highlight и метода CSS.registerProperty(). Това позволява по-сложно и гъвкаво подчертаване на текст, надхвърлящо основното стилизиране на ::selection.

Ключови концепции:

• ::highlight(highlight-name): Този псевдоелемент насочва конкретно персонализирано подчертаване с име highlight-name. Първо трябва да регистрирате името на подчертаването.
• CSS.registerProperty(): Този метод регистрира ново персонализирано свойство, включително неговия синтаксис, поведение при наследяване, първоначална стойност и свързаното с него име на персонализирано подчертаване.
• Highlight Painter: Персонализиран рендърър, който определя как трябва да бъде рендирано подчертаването (напр. добавяне на градиент, изображение или по-сложен визуален ефект). Това често включва използването на CSS Painting API.

Контрол на приоритета на подчертаването

Една от най-мощните характеристики на Custom Highlight API е възможността за контрол на приоритета на различните слоеве за подчертаване. Това е от решаващо значение, когато имате множество припокриващи се подчертавания и трябва да определите кое подчертаване трябва да бъде видимо отгоре.

Приоритетът на подчертаванията се определя от реда, в който са дефинирани в CSS. Подчертаванията, дефинирани по-късно в таблицата със стилове, имат по-висок приоритет и ще бъдат рендирани върху по-ранните подчертавания. Това е аналогично на реда на подреждане на елементи с различни стойности на z-index.

Пример: Основен приоритет на подчертаването

Разгледайте следния CSS:

            
::selection {
 background-color: lightblue;
 color: black;
}

::highlight(custom-highlight) {
 background-color: lightcoral;
 color: white;
}

            

              
                Copy
              
            
          

В този случай, ако както ::selection, така и ::highlight(custom-highlight) се прилагат към един и същ текстов диапазон, ::highlight(custom-highlight) ще има предимство, защото е дефиниран по-късно в таблицата със стилове.

Пример: Регистриране на персонализирано подчертаване

Преди да използвате ::highlight, обикновено трябва да регистрирате персонализираното свойство в JavaScript. Ето опростен пример:

            
if (CSS.registerProperty) {
 CSS.registerProperty({
 name: '--custom-highlight-color',
 syntax: '',
 inherits: false,
 initialValue: 'yellow',
 });
}

            

              
                Copy
              
            
          

И съответният CSS:

            
::highlight(my-custom-highlight) {
 background-color: var(--custom-highlight-color);
}

            

              
                Copy
              
            
          

Практически случаи на употреба за приоритет на персонализирано подчертаване

Нека разгледаме някои практически случаи на употреба, при които контролирането на приоритета на подчертаването може значително да подобри потребителското изживяване:

1. Подчертаване на резултатите от търсенето

Когато показвате резултати от търсене, често искате да подчертаете търсените термини в съдържанието. Ако потребителят също така избира текст, съдържащ термина за търсене, може да искате подчертаването на търсенето да остане видимо под подчертаването на селекцията, или обратното, в зависимост от желания ефект.

Сценарий: Потребител търси "global accessibility" на уеб страница. Резултатите от търсенето са подчертани в жълто. След това потребителят избира част от текста, която включва "global accessibility".

Имплементация:

            
.search-highlight {
 background-color: yellow;
}

::selection {
 background-color: lightblue;
 color: black;
}

            

              
                Copy
              
            
          

Като дефинирате ::selection след .search-highlight, подчертаването на селекцията ще бъде отгоре. Можете да обърнете реда, за да запазите термина за търсене винаги подчертан, дори когато е избран.

2. Подчертаване на синтаксиса в редактори на код

Редакторите на код често използват подчертаване на синтаксиса, за да подобрят четимостта. Когато потребител избира блок от код, може да искате подчертаването на синтаксиса да остане видимо под подчертаването на селекцията, за да запазите структурата на кода.

Сценарий: Потребител избира блок от Python код в онлайн редактор на код. Редакторът на код използва подчертаване на синтаксиса, за да разграничи ключови думи, променливи и коментари.

Имплементация:

            
.keyword {
 color: blue;
}

.comment {
 color: gray;
}

::selection {
 background-color: rgba(0, 0, 255, 0.1);
}

            

              
                Copy
              
            
          

В този случай стиловете за подчертаване на синтаксиса (.keyword, .comment) ще бъдат приложени първо, а подчертаването ::selection ще бъде рендирано отгоре, осигурявайки фина визуална индикация, без да закрива подчертаването на синтаксиса.

3. Сътрудничество и анотации

В съвместни документи или инструменти за анотации различни потребители могат да подчертават различни секции от текста. Контролът на приоритета на подчертаването може да помогне за разграничаването между подчертаванията на различни потребители и поддържането на ясна визуална йерархия.

Сценарий: Трима потребители (Алис, Боб и Чарли) си сътрудничат по документ. Алис подчертава текст в зелено, Боб подчертава текст в жълто, а Чарли подчертава текст в червено.

Имплементация:

            
.alice-highlight {
 background-color: green;
}

.bob-highlight {
 background-color: yellow;
}

.charlie-highlight {
 background-color: red;
}

::selection {
 background-color: rgba(0, 0, 255, 0.1);
}

            

              
                Copy
              
            
          

Подчертаването ::selection ще бъде рендирано отгоре на потребителските подчертавания, което позволява на потребителите да избират текст, без напълно да закриват съществуващите анотации.

4. Подчертаване на грешки във формуляри

При валидиране на формуляри е важно ясно да се посочи кои полета съдържат грешки. Персонализираните подчертавания могат да се използват за визуално подчертаване на полетата с грешки. Контролирането на приоритета на подчертаването гарантира, че подчертаването на грешката остава видимо, дори когато потребителят избира грешното поле.

Сценарий: Потребител изпраща формуляр с невалиден имейл адрес. Полето за имейл е подчертано в червено, за да посочи грешката.

Имплементация:

            
.error-highlight {
 background-color: red;
 color: white;
}

::selection {
 background-color: rgba(0, 0, 255, 0.1);
}

            

              
                Copy
              
            
          

.error-highlight ще бъде приложен към грешното поле, а подчертаването ::selection ще бъде рендирано отгоре, позволявайки на потребителя да избере полето, като същевременно остава наясно с грешката.

Съображения за достъпност

При персонализиране на подчертаванията на текст е от решаващо значение да се вземе предвид достъпността. Уверете се, че цветовете на подчертаванията осигуряват достатъчен контраст с цвета на текста, за да отговарят на стандартите на WCAG (Web Content Accessibility Guidelines). Освен това предоставяйте алтернативни визуални индикации за потребители, които може да имат затруднения с възприемането на цветове.

1. Цветен контраст

Използвайте инструмент за проверка на цветния контраст, за да се уверите, че съотношението на контраста между цвета на фона на подчертаването и цвета на текста отговаря на минималните изисквания, посочени в WCAG. Съотношение на контраст от поне 4,5:1 се препоръчва за нормален текст и 3:1 за голям текст.

2. Алтернативни визуални индикации

Предоставяйте алтернативни визуални индикации в допълнение към цвета, за да посочите подчертан текст. Това може да включва използването на различно тегло на шрифта, добавяне на подчертаване или използване на рамка.

3. Достъпност чрез клавиатура

Уверете се, че персонализираните подчертавания се прилагат и когато потребителят навигира през текста с помощта на клавиатурата. Използвайте псевдокласа :focus, за да стилизирате фокусирания елемент и да осигурите ясна визуална индикация за това кой елемент е избран в момента.

4. Съвместимост с екранни четци

Тествайте персонализираните си подчертавания с екранни четци, за да се уверите, че подчертаният текст се обявява правилно на потребители с нарушено зрение. Използвайте ARIA атрибути, за да предоставите допълнителен контекст и информация за подчертания текст.

Съображения за интернационализация (i18n)

Селекцията и подчертаването на текст могат да се държат различно в различните езици и писмености. Вземете предвид следните аспекти на интернационализацията при прилагане на персонализирани подчертавания:

1. Посока на текста (RTL/LTR)

Уверете се, че посоката на подчертаването е съобразена с посоката на текста. В езици с посока от дясно наляво (RTL), подчертаването трябва да започва отдясно и да се простира наляво.

2. Набори от символи

Тествайте персонализираните си подчертавания с различни набори от символи, за да се уверите, че те се показват правилно. Някои набори от символи може да изискват специфични настройки на шрифта или кодиране, за да се рендират правилно.

3. Граници на думите

Имайте предвид, че границите на думите могат да варират в различните езици. Уверете се, че подчертаването се прилага върху цялата дума, дори ако тя съдържа символи, които не се считат за символи на думи в английския език.

4. Езиково-специфично стилизиране

Може да се наложи да приложите различни стилове на подчертаване в зависимост от езика на съдържанието. Използвайте псевдокласа :lang(), за да насочите към конкретни езици и да приложите езиково-специфично стилизиране.

Пример: Подчертаване на текст на арабски (RTL):

            
:lang(ar) {
 direction: rtl;
}

::selection {
 background-color: lightblue;
 color: black;
}

            

              
                Copy
              
            
          

Разширени техники и бъдещи насоки

1. CSS Painting API

CSS Painting API ви позволява да създавате силно персонализирани подчертавания, като използвате JavaScript за дефиниране на логиката за рисуване. Това отваря широк набор от възможности, като например създаване на анимирани подчертавания, добавяне на сложни визуални ефекти или интегриране с външни източници на данни.

2. Персонализирани Highlight Painters

Можете да създавате персонализирани highlight painters, които разширяват функционалността на CSS Painting API. Това ви позволява да капсулирате използваема логика за подчертаване и да я прилагате към различни елементи или области за подчертаване.

3. Интегриране с JavaScript рамки

JavaScript рамки като React, Angular и Vue.js могат да се използват за динамично управление на персонализирани подчертавания. Това ви позволява да създавате интерактивни инструменти за подчертаване, които реагират на потребителски вход или промени в данните.

Съвместимост с браузъри

CSS Custom Highlight API все още е сравнително нов и съвместимостта с браузърите може да варира. Проверете най-новите таблици за съвместимост с браузъри на уебсайтове като Can I use..., за да се уверите, че API се поддържа във вашите целеви браузъри. Помислете за използване на polyfills или алтернативни подходи за по-стари браузъри, които не поддържат API.

Заключение

CSS Custom Highlight API предоставя мощен начин за контролиране на приоритета на слоевете за селекция на текст и управление на подчертаванията за глобална достъпност. Като разбирате ключовите концепции и техники, обсъдени в тази публикация в блога, можете да създадете визуално привлекателни, достъпни и интернационализирани уеб изживявания, които подобряват потребителското изживяване за всички. Не забравяйте винаги да вземате предвид достъпността, интернационализацията и съвместимостта с браузъри при прилагане на персонализирани подчертавания.

Чрез внимателно управление на приоритета на подчертаването и отчитане на нуждите на глобална аудитория, можете да създадете уеб изживявания, които са едновременно визуално привлекателни и високо достъпни, като гарантирате, че всеки може да се наслади на съдържанието, което създавате. Бъдещето на CSS подчертаванията е светло, като CSS Painting API и custom highlight painters проправят пътя за още по-иновативни и креативни техники за подчертаване.